<template>
    <div class="hotSale">
        <h1>海外热销</h1>
        <div class="productFrame">
            <div class="product">
                 <!-- swiper -->
                <swiper :options="swiperOption" class="swiper-box">
                    <swiper-slide v-for="(item,index) in products" :key="index">
                        <img :src="item.image" alt="">
                        <div class="title" v-text="item.title"></div>
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: 4,
          spaceBetween: 28,
          centeredSlides: true,
          loop: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
          pagination: {
          el: '.swiper-pagination',
          clickable: true
          }
        },
        swipe: null,
        products: [{
                id:1,
                image:require("../../assets/images/hotproducts/1.jpg"),
                title:"时尚新品1234"
            },
            {
                id:2,
                image:require("../../assets/images/hotproducts/2.jpg"),
                title:"时尚新品1234"
            },
            {
                id:3,
                image:require("../../assets/images/hotproducts/3.jpg"),
                title:"时尚新品1234"
            },
            {
                id:4,
                image:require("../../assets/images/hotproducts/4.jpg"),
                title:"时尚新品1234"
            },
            {
                id:5,
                image:require("../../assets/images/hotproducts/5.jpg"),
                title:"时尚新品1234"
            },
            {
                id:6,
                image:require("../../assets/images/hotproducts/6.jpg"),
                title:"时尚新品1234"
            },
            {
                id:7,
                image:require("../../assets/images/hotproducts/7.jpg"),
                title:"时尚新品1234"
            },
            {
                id:8,
                image:require("../../assets/images/hotproducts/8.jpg"),
                title:"时尚新品1234"
            },
            {
                id:9,
                image:require("../../assets/images/hotproducts/9.jpg"),
                title:"时尚新品1234"
            },
            {
                id:10,
                image:require("../../assets/images/hotproducts/10.jpg"),
                title:"时尚新品1234"
            },
            {
                id:11,
                image:require("../../assets/images/hotproducts/11.jpg"),
                title:"时尚新品1234"
            },
            {
                id:12,
                image:require("../../assets/images/hotproducts/12.jpg"),
                title:"时尚新品1234"
            },
            ]
      }
    }
  }
</script>

<style lang="less">
    .hotSale{
        width: 100%;
        margin-top: 0.5rem;
        h1{
            margin: 0;
            padding: 0;
            margin-left: 0.3rem;
            color: #042E5B;
            // border: 1px solid blue;
        }
        .productFrame{
            width:100%;
            height: 3rem;
            background-color: #FF8688;
            position: relative;
            border-radius: 0.3rem 0 0 0.3rem;
            .product{
                width:calc(100% - 0.15rem);
                height: 2.7rem;
                margin: 0.15rem 0 0.15rem 0.15rem;
                background-color: #EF181B;
                position: absolute; //这里不能去掉，否则上边线与productFrame的上边线重合了
                border-radius: 0.2rem 0 0 0.2rem;
                // text-align: left; //不起作用
                .swiper-box{
                    // 这个上面没用,用不到这个盒子！
                    // margin:0rem 0 0.24rem -0.27rem;
                    // margin:0rem;
                    .swiper-wrapper{
                        margin-left: -2.8rem;
                        img{
                            margin-top:0.24rem;
                            width: 1.8rem;
                            height: 1.8rem;
                            // margin-left: 0.2rem; 位置不对,因为参照外层的盒子而不是product层
                        }
                        .title{
                                margin-top: 0.1rem;
                                width: 1.8rem;
                                text-align: center;
                                color: #fff;
                        }
                    }
                    .swiper-pagination-bullets{
                        bottom: 0.4rem;
                    } 
                }
            }
        }
    }
    
    



</style>